<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="css/eui.css">
    <style>
        body{
            font: 18px "Microsoft YaHei UI";
            margin: 0;
            background-color: #fafafa;
        }
        header a{
            text-decoration: none;
            color: #6c6c6c;
        }
        header a:hover{
            color: #0aa1ed;
        }
        .el-input__inner{
            padding-right: 35px;
        }
        /*销量排行榜表格间距*/
        .el-table .el-table__cell{
            padding: 0;
        }
        /*给图片添加阴影*/
        .item_div>img:hover{
            position: relative;
            bottom: 5px;
            /*元素阴影: x偏移值 y偏移值 浓度 范围 颜色*/
            box-shadow: 0 0 12px 5px #333;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <div style="width: 1200px;margin: 0 auto">
                <img src="imgs/logo.png" style="width: 300px;vertical-align: middle" alt="">
                <span style="margin-left: 50px">
        <a href="" style="color: #0aa1ed">首页</a><el-divider direction="vertical"></el-divider>
        <a href="">热点咨询</a><el-divider direction="vertical"></el-divider>
        <a href="">社会招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">校园招聘</a><el-divider direction="vertical"></el-divider>
        <a href="">帮助中心</a>
                    <span style="display: inline-block;float: right;margin-top: 35px">
                        <el-dropdown>
                        <i class="el-icon-user-solid" style="margin-right: 15px"></i>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>修改密码</el-dropdown-item>
                            <el-dropdown-item>我的购物车</el-dropdown-item>
                            <el-dropdown-item>我的订单</el-dropdown-item>
                            <el-dropdown-item>退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                    <span>欢迎用户{{}}登录</span>
                    </span>
      </span>
            </div>
            <!--蓝条开始-->
            <div style="width: 100%;height:60px;background-color: #82c8ec">
                <el-menu style="width: 1200px;margin: 0 auto"
                         default-active="1"
                         class="el-menu-demo"
                         mode="horizontal"
                         @select="handleSelect"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff">
                    <el-menu-item :index="1" v-for="item in categoryArr">{{item.name}}</el-menu-item>
                    <el-menu-item style="margin-left: 480px">
                        <el-input size="mini" v-model="wd" placeholder="请输入关键字搜索"></el-input>
                    </el-menu-item>
                    <el-button style="background-color: rgba(0,0,0,0);border:none;position: relative;top: 15px;right: 70px"
                               icon="el-icon-search"></el-button>
                </el-menu>
            </div>
            <!--蓝条结束-->
        </el-header>
        <el-main style="width: 1200px;margin: 100px auto 0 auto">
            <el-row :gutter="20">
                <el-col :span="18">
                    <!--走马灯开始-->
                    <el-carousel trigger="click" height="450px">
                        <el-carousel-item v-for="b in bannerArr" :key="item">
                            <img :src="b.url" style="width: 100%;height: 100%" alt="">
                        </el-carousel-item>
                    </el-carousel>
                    <!--走马灯结束-->
                </el-col>
                <el-col :span="6">
                    <el-card>
                        <h3><i style="font-weight: bold" class="el-icon-trophy"></i>销量最高</h3>
                        <el-divider></el-divider>
                        <!--销量排行榜开始-->
                        <el-table :data="itemArr" style="width: 500px">
                            <!--type="index" 列的内容为序号-->
                            <el-table-column type="index" label="排名">
                            </el-table-column>
                            <el-table-column prop="name" label="商品名">
                            </el-table-column>
                            <el-table-column prop="count" label="销量">
                            </el-table-column>
                        </el-table>
                        <!--销量排行榜结束-->
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表开始-->
            <el-row :gutter="20">
                <el-col :span="6" v-for="i in productArr">
                    <el-card :body-style="{ padding: '0px' }">
                        <div class="item_div" style="padding: 20px 20px 0 20px">
                            <img :src="i.urls[0]" width="100%" class="image">
                        </div>
                        <div style="padding: 14px;">
                            <p style="margin-top: -10px;font-size: 18px;height: 38px;text-align: center;font-weight: bold ">{{i.proname}}</p>
                            <p style="margin-top: -10px;font-size: 15px;height: 38px;text-align: center;
                                      white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{i.desproduct}}</p>
                            <div class="bottom clearfix" style="color: #6c6c6c">
                <span>￥{{i.price}}
                  <small style="text-decoration: line-through">￥{{i.discountprice}}</small></span>
                                <span style="float: right">销量:{{i.sales}}件</span>
                            </div>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
            <!--商品列表结束-->
<!--            分页-->
            <template>
                <div class="block" style="float: right">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="currentPage"
                            :page-sizes="pagesizes"
                            :page-size="pageS"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="alltotal">
                    </el-pagination>
                </div>
            </template>
        </el-main>
        <el-footer>
            <div style="background-image: url('imgs/wave.png');
    height: 95px;margin-bottom: -30px"></div>
            <div style="background-color: #3f3f3f;padding: 30px;
    text-align: center;color: #b1b1b1;font-size: 14px;height: 100px">
                <p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
                <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
                <p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
            </div>
        </el-footer>
    </el-container>

</div>
</body>
<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<!-- import JavaScript -->
<script src="element-ui/lib/index.js" type="text/javascript"></script>
<script>
  let v = new Vue({
        el: '#app',
        data: function() {
            return {
                wd:"",
                bannerArr:'',
                itemArr:[{name:"小米12pro",count:876543},
                    {name:"华为手表",count:76543},
                    {name:"苹果手机",count:3000}],
                productArr:[],
                categoryArr:[],
                //分页
                currentPage: '1',
                pagesizes:[8, 12, 16, 20],
                alltotal:'',
                pagesize:'',
                pageS:''
            }
        },
        created:function(){
          this.loadindex();
          this.loadPage(1,8);
        },
        methods:{
            handleSelect(){

            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                v.pageS=val
                v.loadPage(v.currentPage,val)
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                v.currentPage=val
                v.loadPage(val,v.pageS)
            },
            loadPage(currentpage,pagesizes){
                //请求获取商品信息
                axios.get("http://localhost:8080/product/selectAllPage?page="+currentpage+"&offset="+pagesizes)
                    .then(function (res) {
                        console.log(res.data)
                        let products =res.data.list
                        //对拿到的数据每一个商品对象做处理让urls变成数组显示第一个图片路径
                        for (let product of products) {
                            let urls = product.urls!=null ? product.urls.split(","):product.urls;
                            product.urls=urls
                        }
                        v.productArr=products
                        //获取总页数
                        v.alltotal=res.data.total
                        //获取当前页显示数
                        v.pagesize=res.data.pagesize
                    })
            },
            loadindex(){
                //页面加载完成请求获取分类数据
                axios.get("http://localhost:8080/category/selectall")
                    .then(function (res) {
                        v.categoryArr =res.data
                    })
                //请求获取轮播图信息
                axios.get("http://localhost:8080/banner/select")
                    .then(function (res) {
                        console.log(res.data)
                        v.bannerArr = res.data;
                    })

            }
        }
    })
</script>
</html>